<template>
  <nav class="navbar navbar-default navbar-custom navbar-fixed-top">
    <div class="container-fluid">
      <div class="navbar-header page-scroll">
        <button type="button" class="navbar-toggle">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="/">乘风 博客</a>
      </div>
      <div id="huxblog_navbar">
        <div class="navbar-collapse">
          <ul class="nav navbar-nav navbar-right">
            <li v-for="(item, index) in headerBtn" :key="index">
              <a :href="item.href" style="font-size: 16px">
                {{ item.name }}
              </a>
            </li>
            <li>
              <a href="/search"><i class="fa fa-search"></i></a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </nav>
  <header class="intro-header" style="background-image: url('src/assets/images/星空路风景.jpg')">
    <div class="container">
      <div class="row">
        <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
          <div class="site-heading">
            <h1>乘风 博客 </h1>
            <span class="subheading"></span>
          </div>
        </div>
      </div>
    </div>
  </header>
  <div data-pagefind-ignore="all" class="container">
    <div class="row">
      <div
        class="col-lg-8 col-lg-offset-1 col-md-8 col-md-offset-1 col-sm-12 col-xs-12 post-container"
      >
        <div data-pagefind-ignore="all">
          <template v-for="(item, index) in content" :key="index">
            <div class="post-preview">
              <a href="#">
                <h2 class="post-title">
                  {{ item.title }}
                </h2>
                <div class="post-content-preview">
                  {{ item.content }}
                </div>
              </a>
              <p class="post-meta"> {{ item.publist_date }} </p>
            </div>
            <hr />
          </template>
        </div>
        <ul class="pager" data-pagefind-ignore="all">
          <li class="next">
            <a href="/page/2/">Older Posts →</a>
          </li>
        </ul>
      </div>
      <div
        class="col-lg-3 col-lg-offset-0 col-md-3 col-md-offset-0 col-sm-12 col-xs-12 sidebar-container"
      >
        <section class="visible-md visible-lg">
          <div class="short-about">
            <a href="/about">
              <img
                src="/src/assets/images/myPic.png"
                alt="avatar"
                style="width: 252px; height: 252px; border-radius: 50%; cursor: pointer"
              />
            </a>
            <p>{{ label.join('，') }}</p>
            <ul class="list-inline">
              <li>
                <a href="mailto:zhaohuabing@gmail.com">
                  <span class="fa-stack fa-lg">
                    <i class="fa fa-circle fa-stack-2x"></i>
                    <i class="fa fa-envelope fa-stack-1x fa-inverse"></i>
                  </span>
                </a>
              </li>
              <li>
                <a href="https://twitter.com/zhaohuabing">
                  <span class="fa-stack fa-lg">
                    <i class="fas fa-circle fa-stack-2x"></i>
                    <i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
                  </span>
                </a>
              </li>
              <li>
                <a target="_blank" href="/img/wechat_qrcode.jpg">
                  <span class="fa-stack fa-lg">
                    <i class="fas fa-circle fa-stack-2x"></i>
                    <i class="fab fa-weixin fa-stack-1x fa-inverse"></i>
                  </span>
                </a>
              </li>
              <li>
                <a target="_blank" href="https://github.com/zhaohuabing">
                  <span class="fa-stack fa-lg">
                    <i class="fas fa-circle fa-stack-2x"></i>
                    <i class="fab fa-github fa-stack-1x fa-inverse"></i>
                  </span>
                </a>
              </li>
              <li>
                <a target="_blank" href="https://www.linkedin.com/in/zhaohuabing">
                  <span class="fa-stack fa-lg">
                    <i class="fas fa-circle fa-stack-2x"></i>
                    <i class="fab fa-linkedin fa-stack-1x fa-inverse"></i>
                  </span>
                </a>
              </li>
              <li>
                <a target="_blank" href="https://medium.com/@zhaohuabing">
                  <span class="fa-stack fa-lg">
                    <i class="fas fa-circle fa-stack-2x"></i>
                    <i class="fab fa-medium fa-stack-1x fa-inverse"></i>
                  </span>
                </a>
              </li>
            </ul>
          </div>
        </section>
        <section>
          <hr />
          <h5>QUICK LINKS</h5>
          <ul class="list-inline">
            <li><a target="_blank" href="https://aeraki.net/">Aeraki Mesh</a></li>
            <li
              ><a target="_blank" href="https://www.zhaohuabing.com/istio-guide"
                >Istio 运维实战</a
              ></li
            >
            <li><a target="_blank" href="https://unsplash.com/">unsplash</a></li>
            <li><a target="_blank" href="https://www.pexels.com">pexels</a></li>
            <li><a target="_blank" href="https://excalidraw.com/">excalidraw</a></li>
            <li><a target="_blank" href="https://doocs.github.io/md">Markdown Editor</a></li>
            <li><a target="_blank" href="https://xiaomark.com/">xiaomark</a></li>
          </ul>
        </section>
        <section>
          <hr class="hidden-sm hidden-xs" />
          <h5>FEATURED TAGS</h5>
          <div class="tags">
            <a href="/tags/aeraki" title="aeraki"> aeraki </a>
            <a href="/tags/aeraki-mesh" title="aeraki-mesh"> aeraki-mesh </a>
            <a href="/tags/ambient-mesh" title="ambient-mesh"> ambient-mesh </a>
            <a href="/tags/api-gateway" title="api-gateway"> api-gateway </a>
            <a href="/tags/bitcoin" title="bitcoin"> bitcoin </a>
            <a href="/tags/blockchain" title="blockchain"> blockchain </a>
            <a href="/tags/cryptocurrency" title="cryptocurrency"> cryptocurrency </a>
            <a href="/tags/dubbo" title="dubbo"> dubbo </a>
            <a href="/tags/envoy" title="envoy"> envoy </a>
            <a href="/tags/envoy-gateway" title="envoy-gateway"> envoy-gateway </a>
            <a href="/tags/istio" title="istio"> istio </a>
            <a href="/tags/kubernetes" title="kubernetes"> kubernetes </a>
            <a href="/tags/metaprotocol" title="metaprotocol"> metaprotocol </a>
            <a href="/tags/microservice" title="microservice"> microservice </a>
            <a href="/tags/onap" title="onap"> onap </a>
            <a href="/tags/service-mesh" title="service-mesh"> service-mesh </a>
          </div>
        </section>
        <!-- <section>
          <hr class="hidden-sm hidden-xs" />
          <h5>MY BOOKS</h5>
          <div class="short-about">
            <a
              href="https://www.manning.com/bundles/distributed-tracing-ser?utm_source=zhaohuabing&amp;utm_medium=affiliate&amp;utm_campaign=liveproject_zhao_distributed_9_7_21&amp;a_aid=zhaohuabing&amp;a_bid=ce8ffc93"
            >
            </a>
            <a href="https://www.zhaohuabing.com/post/2021-08-26-istio-handbook/"> </a>
            <a href="https://zhaohuabing.com/post/2021-08-27-cloud-native-data-center/"> </a>
          </div>
        </section> -->
      </div>
    </div>
  </div>
  <footer>
    <div class="container">
      <div class="row">
        <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
          <ul class="list-inline text-center">
            <li>
              <a href="mailto:zhaohuabing@gmail.com">
                <span class="fa-stack fa-lg">
                  <i class="fas fa-circle fa-stack-2x"></i>
                  <i class="fas fa-envelope fa-stack-1x fa-inverse"></i>
                </span>
              </a>
            </li>
            <li>
              <a href="https://twitter.com/zhaohuabing">
                <span class="fa-stack fa-lg">
                  <i class="fas fa-circle fa-stack-2x"></i>
                  <i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
                </span>
              </a>
            </li>
            <li>
              <a target="_blank" href="/img/wechat_qrcode.jpg">
                <span class="fa-stack fa-lg">
                  <i class="fas fa-circle fa-stack-2x"></i>
                  <i class="fab fa-weixin fa-stack-1x fa-inverse"></i>
                </span>
              </a>
            </li>
            <li>
              <a target="_blank" href="https://github.com/zhaohuabing">
                <span class="fa-stack fa-lg">
                  <i class="fas fa-circle fa-stack-2x"></i>
                  <i class="fab fa-github fa-stack-1x fa-inverse"></i>
                </span>
              </a>
            </li>
            <li>
              <a target="_blank" href="https://www.linkedin.com/in/zhaohuabing">
                <span class="fa-stack fa-lg">
                  <i class="fas fa-circle fa-stack-2x"></i>
                  <i class="fab fa-linkedin fa-stack-1x fa-inverse"></i>
                </span>
              </a>
            </li>
            <li>
              <a target="_blank" href="https://medium.com/@zhaohuabing">
                <span class="fa-stack fa-lg">
                  <i class="fas fa-circle fa-stack-2x"></i>
                  <i class="fab fa-medium fa-stack-1x fa-inverse"></i>
                </span>
              </a>
            </li>
            <li>
              <a href="/index.xml" rel="alternate" type="application/rss+xml" title="乘风 博客">
                <span class="fa-stack fa-lg">
                  <i class="fas fa-circle fa-stack-2x"></i>
                  <i class="fas fa-rss fa-stack-1x fa-inverse"></i>
                </span>
              </a>
            </li>
          </ul>
          <p class="copyright text-muted"> Copyright © 乘风 博客 2024 </p>
        </div>
      </div>
    </div>
  </footer>
</template>

<script setup>
  import { ref } from 'vue';

  const headerBtn = [
    {
      name: '控制台',
      href: '/',
    },
    {
      name: '关于我',
      href: '#',
    },
  ];
  const content = ref([
    {
      title: '郑重申明',
      content: '主页还在装修中哟，这不是最终效果！！！',
      publist_date: 'Posted by 乘风 博客 on 2024-06-15',
    },
    {
      title: 'HTTP协议的演进：从HTTP/1.1到HTTP/3',
      content:
        '在互联网的世界里，HTTP（Hypertext Transfer Protocol）作为最基础的网络通信协议，一直扮演着至关重要的角色。随着技术的不断进步和网络需求的日益增长，HTTP协议也在不断地进化。本文将带您了解HTTP/1.1、HTTP/2以及最新的HTTP/3之间的关键区别和技术细节。',
      publist_date: 'Posted by 乘风 博客 on 2024-06-15',
    },
    {
      title: 'React合成事件与原生事件的区别',
      content:
        '在使用React进行开发时，我们经常会处理各种各样的事件，比如点击事件、键盘事件等。React引入了一个名为合成事件（SyntheticEvent）的机制，这与我们在原生JavaScript中使用的事件有所不同。本文将详细介绍React合成事件与原生事件的区别，以及为什么React要引入合成事件。',
      publist_date: 'Posted by 乘风 博客 on 2024-06-13',
    },
    {
      title: '理解 Vue.js 父子组件执行顺序',
      content:
        '在 Vue.js 开发的过程中，组件化开发是一种常见的实践方法。了解父组件和子组件的执行顺序对于调试和优化应用程序的性能至关重要。这篇博客将深入探讨 Vue.js 父子组件的生命周期钩子，以及它们的执行顺序。',
      publist_date: 'Posted by 乘风 博客 on 2024-06-12',
    },
    {
      title: '什么是函数柯里化？',
      content:
        '函数柯里化（Currying）是计算机科学中的一个重要概念，尤其在函数式编程中广泛应用。这个术语以逻辑学家 Haskell Curry 的名字命名。柯里化技术最早被用于数学领域，但是在编程中尤其是 JavaScript、Haskell、Scala 等语言中，它是一种高效且常用的技术。本文将深入探讨函数柯里化的概念、其优势以及如何在代码中实现。',
      publist_date: 'Posted by 乘风 博客 on 2024-06-12',
    },
    {
      title: '为什么JavaScript要设计成基于原型的模式',
      content:
        'JavaScript（以下简称 JS）作为一种动态、解释型语言，自诞生以来就在Web开发中占据了重要地位。与其他经典的面向对象编程(OOP)语言如Java、C++采用类（Class）继承不同，JavaScript选择了一种独特的基于原型（Prototype-based）的继承模式。那么，大家伙有没有思考过一个问题,为什么 JS 要设计成基于原型的模式呢？既然它想蹭Java的热度，为什么它不设计成像Java一样基于类继承的模式？本文将从历史背景、设计哲学、灵活性和性能等几个方面探讨这个问题，希望大家阅读后，能更加理解这门语言的思想与魅力。',
      publist_date: 'Posted by 乘风 博客 on 2024-06-10',
    },
    {
      title: '如何在Node.js中使用HTTPS',
      content:
        '前段时间在将个人主页上传至GithubPages的时候，遇到一个服务端没有使用HTTPS的错误,因为GithubPages默认的域名就是HTTPS的，而我的服务器还是HTTP的，这样就导致了请求访问不通，那么在Node.js中如何使用HTTPS呢?让我们一起往下看。',
      publist_date: 'Posted by 乘风 博客 on 2024-06-10',
    },
  ]);
  const label = [
    '前端工程师',
    '后端初级选手',
    '跑步爱好者',
    '美食爱好者',
    '二次元爱好者',
    'b站深度用户',
    '网易云深度用户',
  ];
</script>

<style lang="less" scoped></style>
